<template>
  <card title="文章列表" class="border-0 p-0" header-class="bg-white border-0">
    <table class="table table-bordered">
      <thead class="text-center table-dark">
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>类目</th>
          <th>热门</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="text-center">
        <tr v-for="(article,index) in articles" :key="index">
          <td>{{index+1}}</td>
          <td>{{article.title}}</td>
          <td>{{ categories[article.category].title }}</td>
          <td>
            <CustomSwitch :data-id="`hot${index}`" v-model="article.hot" />
          </td>
          <td>
            <router-link :to="`/article/edit/${index}`" class="btn btn-primary btn-sm">编辑</router-link>
            <button class="btn btn-danger btn-sm" @click="articles.splice(index,1)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </card>
</template>
<script>
import Card from "@/components/Card";
import CustomSwitch from "@/components/CustomSwitch";
export default {
  name: "ArticleList",
  components: {
    CustomSwitch,
    Card
  },
  data: function() {
    return {
      articles: this.$parent.articles,
      categories: this.$parent.categories
    };
  }
};
</script>